@use '../variables';

$block: '.#{variables.$ns}overlay';

#{$block} {
    position: absolute;
    inset: 0;

    display: flex;
    visibility: hidden;
    justify-content: center;
    align-items: center;

    isolation: isolate;

    opacity: 0;

    transition:
        visibility 0.1s,
        opacity 0.1s linear;

    &_visible {
        visibility: visible;

        opacity: 1;
    }

    &__background {
        position: absolute;
        z-index: 0;
        inset: 0;

        opacity: 0.8;

        &_style {
            &_base {
                background-color: var(--g-color-base-background);
            }

            &_float {
                background-color: var(--g-color-base-float);
            }
        }
    }

    &__children {
        z-index: 1;
    }
}
